<template>
	<view class="content">
		<!-- <view class="keyword-box">
			<text v-for="(item,index) in keywords" :key="index">#{{item}}#</text>
		</view> -->
		<textarea class='textarea-content' placeholder="这一刻的想法..." v-model="content" maxlength="-1"></textarea>
		<!-- 上传视频或者图片 -->
		<view class="up-page">
			<!--图片-->
			<view class="show-box" v-for="(item,index) in imageList" :key="index">
				<image class="full" :src="item" :data-src="image" @tap="previewImage(item)">
				</image>
				<view class="delect-icon" @tap="delect(index)">
					<image class="full" :src="clearIcon" mode=""></image>
					<!--图片或者视频上传成功了，点击右上角叉号-->
				</view>
			</view>
			<!--视频-->
			<view class="show-box" v-for="(item1, index1) in videoList" :key="index1">
				<video class="full" :src="item1"></video>
				<view class="delect-icon" @tap="delectVideo(index1)">
					<image class="full" :src="clearIcon" mode=""></image>
				</view>
			</view>
			<view v-if="VideoOfImagesShow" @tap="chooseVideoImage" class="box-mode">
				<image class="full" :src="selectfile" mode=""></image>
				<!-- 上传图标 懒得写，整个的图 -->
			</view>
		</view>

		<view class="operate-block">
			<view class="operate-item" @click="createKeyword">
				<view class="o-left">
					<image :src="imageUrl+'/found/keyword_icon.png'" mode="widthFix" class="icon"></image>
					<view class="name">插入话题</view>
				</view>
				<view class="iconfont icon-gengduo1"></view>
			</view>
			<!-- <view class="operate-item">
				<view class="o-left">
					<image :src="imageUrl+'/found/location_icon.png'" mode="widthFix" class="icon"></image>
					<view class="name">所在位置</view>
				</view>
				<view class="iconfont icon-gengduo1"></view>
			</view>
			<view class="operate-item">
				<view class="o-left">
					<image :src="imageUrl+'/found/aite_icon.png'" mode="widthFix" class="icon"></image>
					<view class="name">提醒谁看</view>
				</view>
				<view class="iconfont icon-gengduo1"></view>
			</view> -->
		</view>
		<view class="btn" @click="goPublish">发表</view>
	</view>
</template>

<script>
	import {
		uploadFile
	} from '@/api/file.js';
	import {
		validate
	} from '@/util/validate.js'

	import {
		addShare
	} from '@/api/circle.js';
	import {showToast,SplitArray} from '@/util/util.js'
	var sourceType = [
		['camera'],
		['album'],
		['camera', 'album']
	];
	export default {
		data() {
			return {
				imageUrl: '',
				image: "",
				// 图标
				clearIcon: '',
				selectfile: '',
				VideoOfImagesShow: true, // 页面图片或视频数量超出后，拍照按钮隐藏
				imageList: [], //存放图片的地址
				videoList: [], //视频存放的地址
				sourceType: ['拍摄', '相册', '拍摄或相册'],
				sourceTypeIndex: 2,
				cameraList: [{
					value: 'back',
					name: '后置摄像头',
					checked: 'true'
				}, {
					value: 'front',
					name: '前置摄像头'
				}],
				cameraIndex: 0, //上传视频时的数量
				maxCount: 9, //图片和视频允许上传的总数

				//内容
				content: '',
				//validate
				rules: {
					content: {
						name: '内容',
						required: true
					},
				},

			}
		},

		methods: {
			//点击上传图片或视频
			chooseVideoImage() {
				uni.showActionSheet({
					title: '选择上传类型',
					itemList: ['图片', '视频'],
					success: res => {
						console.log(res);
						if (res.tapIndex == 0) {
							this.chooseImages();
						} else {
							this.chooseVideo();
						}
					}
				});
			},

			//上传图片
			chooseImages() {
				uni.showLoading({
					title: '上传中',
					mask: true
				})

				uni.chooseImage({
					count: this.maxCount, //允许选择的数量
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: (e) => {
						//console.log(e)
						for (var i = 0; i < e.tempFilePaths.length; i++) {
							uploadFile(e.tempFilePaths[i]).then((res) => {
								let data = JSON.parse(res.data);
								uni.hideLoading()
								if (data.code == 200) {
									//showToast('上传成功')
									//this.form.logoUrl = data.imgURL
									this.imageList = this.imageList.concat(data.data);
									console.log(this.imageList)
									if (this.imageList.length + this.videoList.length == this.maxCount) {
										this.VideoOfImagesShow = false; //图片上传数量和count一样时，让点击拍照按钮消失
									}
								} else {
									showToast(data.msg)
								}
								
							}).catch((res) => {
								//console.log(res)
								uni.hideLoading()
								showToast('上传失败');
							})
						}

					},
					complete:()=>{
						//取消上传时关闭loading
						uni.hideLoading()
					},
				})
			},
			//上传视频
			chooseVideo(index) {
				uni.showLoading({
					title: '上传中',
					mask: true
				})

				uni.chooseVideo({
					maxDuration: 60, //拍摄视频最长拍摄时间，单位秒。最长支持 60 秒
					count: this.maxCount,
					camera: this.cameraList[this.cameraIndex].value, //'front'、'back'，默认'back'
					sourceType: sourceType[this.sourceTypeIndex],
					success: (e) => {

						uploadFile(e.tempFilePath).then((res) => {
							const data = JSON.parse(res.data);
							uni.hideLoading()
							if (data.code == 200) {
								//showToast('上传成功')
								//this.form.logoUrl = data.imgURL
								this.videoList = this.videoList.concat(data.data);
								if (this.imageList.length + this.videoList.length == this.maxCount) {
									this.VideoOfImagesShow = false;
								}
							} else {
								showToast(data.msg)
							}
						}).catch((res) => {
							//console.log(res)
							uni.hideLoading()
							showToast('上传失败');
						})
					},
					complete:()=>{
						uni.hideLoading()
					},
				})
			},
			//预览图片
			previewImage: function(e) {
				console.log(e)
				uni.previewImage({
					current: e,
					urls: this.imageList
				});
			},
			// 删除图片
			delect(index) {
				uni.showModal({
					title: '提示',
					content: '是否要删除该图片',
					success: res => {
						if (res.confirm) {
							this.imageList.splice(index, 1);
						}
						if (this.imageList.length + this.videoList.length == this.maxCount) {
							this.VideoOfImagesShow = false;
						} else {
							this.VideoOfImagesShow = true;
						}
					}
				});
			},
			// 删除视频
			delectVideo(index) {
				uni.showModal({
					title: '提示',
					content: '是否要删除此视频',
					success: res => {
						if (res.confirm) {
							this.videoList.splice(index, 1);
						}
						if (this.imageList.length + this.videoList.length == this.maxCount) {
							this.VideoOfImagesShow = false;
						} else {
							this.VideoOfImagesShow = true;
						}
					}
				});
			},
			//创建关键词
			createKeyword() {
				let temp = "#输入话题标题#";
				this.content = temp + this.content
			},
			//去发布
			goPublish() {
				const form = {};
				form.content = this.content
				form.type = this.identity
				const imageList = JSON.parse(JSON.stringify(this.imageList));
				const videoList = JSON.parse(JSON.stringify(this.videoList));
				form.imgList = SplitArray(imageList, videoList).join(',')

				if (validate(form, this.rules)) {
					uni.showLoading({
						title: '提交中',
						mask: true
					})
					addShare(form).then((res) => {

						uni.hideLoading()
							showToast('发表成功', function() {
								uni.navigateTo({
									url: '/page_other/circle/index'
								})
							})
						
					}).catch((res) => {
						uni.hideLoading()
					})
				}
			}
		},

		onUnload() {
			this.imageList = []
			this.sourceTypeIndex = 2
			this.sourceType = ['拍摄', '相册', '拍摄或相册']
		},
		computed: {
			identity() {
				return this.$store.getters.identity
			},
			user() {
				return this.$store.getters.user;
			}
		},

		onLoad() {
			this.imageUrl = this.globalConfig.imageUrl;
			
		}
	}
</script>

<style lang="scss">
	$box-shadow: 0 0 10px 0 #efefef;

	page {
		background: #FAFAFA;
	}

	.content {
		width: 95%;
		margin: auto;
		padding-bottom:100rpx;

		.keyword-box {
			display: flex;
			color: #0b93e1;
		}

		.textarea-content {
			width: 100%;
			height: 300rpx;
			padding: 30rpx 0 10rpx 0;
			margin: auto;
			//border-bottom: 1px solid #f1f1f1;
		}

		.box-mode {
			width: 29vw;
			height: 29vw;

			border-radius: 8rpx;
			overflow: hidden;
		}

		.full {
			width: 100%;
			height: 100%;
		}

		.up-page {
			display: flex;
			flex-wrap: wrap;
			display: flex;
			width: 100%;
			margin-bottom: 40rpx;

			.show-box:nth-child(3n) {
				margin-right: 0;
			}

			.show-box {
				position: relative;
				margin-bottom: 4vw;
				margin-right: 4vw;
				@extend .box-mode;

				.delect-icon {
					height: 40rpx;
					width: 40rpx;
					position: absolute;
					right: 0rpx;
					top: 0rpx;
					z-index: 1000;
				}
			}
		}

		.operate-block {
			display: flex;
			flex-direction: column;
			border-top: 1px solid #f1f1f1;

			.operate-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 30rpx 5rpx;
				border-bottom: 1px solid #f1f1f1;

				.o-left {
					display: flex;
					align-items: center;

					.icon {
						width: 40rpx;
						margin: 0 20rpx 0 10rpx;
					}
				}
			}

			.icon-gengduo1 {
				color: #ccc;
				margin-right: 10rpx;
			}
		}

		.btn {
			width: 350rpx;
			height: 80rpx;
			line-height: 80rpx;
			color: #fff;
			text-align: center;
			margin: 100rpx auto 30rpx auto;
			background-color: #ff7626;
			border-radius: 80rpx;
		}
	}
</style>
